<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子组件传值</title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>图片显示</h1> 
			<div>
			<!-- 	<input type="radio" name="choosepic" v-for="(item,index) in pics" :value="item" v-html="index" v-model="choosepic">{{index}} -->
			<span v-for="(item,index) in pics">
				<input type="radio" name="choosepic" :value="item"  v-model="choosepic">{{index+1}}
			</span>
				<!-- <input type="radio" name="choosepic" v-for="(item,index) in pics" :value="item" v-html="index" v-model="choosepic">{{index}} -->
				<input type="number" v-model="picheight"/>
			</div>
			<!-- <item picpath="../../day7/1.jpg"></item> -->
			<item :picpath="choosepic" :pheight="picheight"></item>
		</div>
		<template id="p1">
			<div id="d1">
				{{pheight}},sss={{gaodu}}
				<h1>当前图片的地址是{{picpath}}</h1>
				<img :src="picpath" :height="pheight"/>
				<img :src="picpath"   :style="'width:'+gaodu"/>
				<h2>{{gaodu}}</h2>
		<img src='../../day7/1.jpg' :width="gaodu"/>
				<!-- <img src='../../day7/1.jpg' height="10%"/> -->
			</div>
		</template>
		<script>
		  var vm=new Vue({
			  el:'#app',
			  data:{
				pics:['../../day7/1.jpg','../../day7/2.jpg','../../day7/3.jpg','../../day7/4.jpg','../../day7/5.jpg']  ,
				choosepic: '',
				picheight: 100
				//choosepic: this.$data.pics[0]
			  },
			  mounted(){
				  this.choosepic=this.pics[0];
			  },
			  components:{
				  'item':{
					  template:'#p1',
					  props:['picpath','pheight'],
					  data:function(){
						  return {
							  gaodu: this.pheight+"%"
						  }
					  },
					   // computed:{
						  //  xingaodu:function(){
							 //   return this.pheight+"%"
						  //  }
						   
					   // },
					   watch:{
						   pheight(){
							   this.gaodu=this.pheight+"%"
						   }
					   },
					  updated(){
						  this.gaodu=this.pheight+"%";
					  }
				  }
			  }
		  })
		</script>
	</body>
</html>
